<template>
  <div class="cell-five">
    <el-button
      :type="buttonType"
      :disabled="disabled"
      @click="click"
      @contextmenu.prevent.native="sign"
      >{{ buttonText }}</el-button
    >
  </div>
</template>

<script>
/**
 * 页面核心数据结构体说明文档
 *
 *
 */
// import New from './components/New.vue';
export default {
  name: "CellFive",
  components: {
    // New,Old,
  },
  props: {
    sampleP: {
      type: Number,
      default: 0,
    },
    value: {
      type: Number,
      default: 0,
    },
    i: Number,
    j: Number,
    state: {
      type: String,
      default: "closed",
    },
    disabled: {
      type: Boolean,
    },
  },
  data() {
    return {
      sampleD: "value",
    };
  },
  computed: {
    // sampleC() {
    //     return this.sampleD+'--';
    // }
    buttonType() {
      // switch (this.state) {
      //   case "opened":
      //     return "";
      //   case "closed":
      //     return "info";
      //   default:
      //     return "warning";
      // }
      if (this.state === "closed") {
        return "info";
      }
      if (this.state === "opened") {
        if (this.value === 9) {
          return "danger";
        } else {
          return "";
        }
      }
      if (this.state === "signed") {
        return "info";
      }
      return "warning";
    },
    buttonText() {
      switch (this.state) {
        case "opened":
          return this.value;
        case "closed":
          return "";
        case "signed":
          return "!";
        default:
          return "";
      }
    },
  },
  created() {},
  mounted() {},
  methods: {
    sampleM() {},
    click() {
      //  改变状态
      if (this.state !== "closed") {
        return;
      }
      // this.state = "opened"; 通知让父页面取更改
      this.$emit("post-click", this.i, this.j);
    },
    sign() {
      this.$message.warning("标记这是雷区" + this.i + this.j);
      if (this.state !== "closed" && this.state !== "signed") {
        return;
      }
      this.$emit("post-sign", this.i, this.j);
      // if (this.state === "closed"){
      //
      // }
      // if (this.state === "signed"){
      //
      // }
      // this.state = "signed";
    },
  },
  watch: {
    // sampleC(newValue, oldValue) {
    //
    // }
  },
};
</script>

<!--<style scoped>-->
<style lang="scss" scoped>
.el-button {
  min-width: 64px;
  min-height: 64px;
}
</style>
